<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>回收订单详情</title>
    <link href="css/public/reset-html5.css" rel="stylesheet">
    <link href="css/public/mui.min.css" rel="stylesheet">
    <link href="css/wx-main.css?20161028_1" rel="stylesheet">
	<link rel="stylesheet" href="css/orderlist.css">
   
    <style>
        .btn_{
            margin-top: 15px;
            margin-bottom: 15px;
            color: #ffffff;
            text-align: center;
            padding: 10px 0;
            border-radius: 10px;
            width: 90%;
            margin-left: 5%;
        }
        .hide{
            display: none;
        }
		td{border:none!important;}
		td:first-child{
			text-align: right;
		}
        [v-cloak] {
            display: none;
        }
	    .circle-1{
		    margin:0 auto;
		    display:block;
	    }
	    .status-text{
		    text-align:center;
		    margin-top:15px;
		    color:#aaa;
	    }
	    .btns{
		    text-align:center;
		    margin:5px 20px 20px;
	    }
	    button{
		    width:100%;
		    padding:8px 0;
		    background: #ffa726;
		    color:#fff;
		    border:none;
		    margin-top:15px;
	    }
	    .price span:last-child{
		    color: #ffa726;
	    }
        .price:after{
	        content:"元";
        }
    </style>
</head>
<body id="main" v-cloak>

<div class="mui-card order-card">
    <div class="mui-card-header primary-text">订单状态</div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p>
	            <span>订单编号：</span>
	            <span v-text="order.order_num"></span>
            </p>
            <div class="circle-1" v-text="status[order.status]"></div>
	        <div class="status-text" v-text="statusText[order.status]"></div>
        </div>
    </div>
    <div class="btns">
	    <!--待结单 1->2-->
	    <button v-show="order.status==1" v-on:click="comfirmOrder();">确认接单</button>
	    
	    <div class="price" v-show="order.status!=1">
		    <span>回收金额：</span>
		    <span v-text="order.price?order.price:order.valuation"></span>
	    </div>
	    <!--待回收-->
	    <div v-show="order.status==2">
		    <!--2->2-->
		    <button v-on:click="editPrice()">修改价格</button>
		    <!--确定回收 2->3-->
		    <button v-on:click="comfirmRecycle();">确认回收</button>
	    </div>
	    
	    <!--修改金额 3->3-->
	    <div v-show="order.status==3">
			<button v-on:click="editPrice()">修改价格</button>
	    </div>
    </div>
</div>

<div class="mui-card order-card">
	<div class="mui-card-header primary-text">联系信息</div>
	<table>
		<tr>
			<td width="90">手机号码</td>
			<td v-text="order.phone_number"></td>
		</tr>
		<tr>
			<td>地区</td>
			<td v-text="order.region"></td>
		</tr>
		<tbody v-if="order.repair_way==1">
			<tr >
				<td>上门时间</td>
				<td v-text="order.door_time"></td>
			</tr>
			<tr>
				<td>详细地址</td>
				<td v-text="order.address"></td>
			</tr>
		</tbody>
		<tr>
			<td>备注</td>
			<td v-text="order.note?order.note:'无'"></td>
		</tr>
		
	</table>
</div>

<div class="mui-card order-card">
	<div class="mui-card-header primary-text">回收信息</div>
	<table>
		<tr>
			<td width="95">回收方式</td>
			<td v-text="ways[order.repair_way]"></td>
		</tr>
		<tr>
			<td>回收机型</td>
			<td v-text="order.v_name"></td>
		</tr>
		<tr>
			<td>费用预估</td>
			<td class="price" v-text="order.valuation"></td>
		</tr>
	</table>
</div>

</body>
<script src="../js/jquery-2.2.1.min.js"></script>
<script src="../plugins/vue/vue.min.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/base.js"></script>
<script src="js/phone.js"></script>
<script src="js/public.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
	var rid = getQueryString("rid");
	if(!rid){
		alert("缺少订单id");
		location.href="recycle_order.html";
	}
	
	var vue = new Vue({
		el:"#main",
		data:{
			statusText:{
				"1":"订单已指派，请尽快与用户联系并确认接单。",
				"2":"已接单，若预估价格有出入，请点击修改价格。",
				"3":"等待客户确认回收价格是否接受...",
				"4":"订单已完成，辛苦了！"
			},
			"order":{},
			status:recycleStatus,
			ways:['', '上门回收', '到店回收']
		},
		methods:{
			/*师傅确认接单,状态1->2*/
			"comfirmOrder":function(){
				mui.confirm( "确认接单", "", ["取消", "确认"], function(val){
					if(val.index==1){
						var index = layer.open({type: 2,shadeClose:false});
						$.post(apiRecycle+"index.php/Home/Master/comfirm_order", {rid:rid}, function(res){
							if(res.code==200){
								vue.order.status = 2;
							} else {
								mui.toast(res.message,{ duration:'long', type:'div'});
							}
							layer.close(index);
						}, "json");
					}
				});
			},
			
			"editPrice":function(){
				mui.prompt('', vue.order.price,'修改回收价格',['取消修改','确定回收'], function(res){
					if(res.index==1){
						var value = res.value;
						var isNum = false;
						
						if (!value.trim() && !isNaN(value)){
							mui.toast('请输入正确数字',{ duration:'long', type:'div' });
							vue.editPrice();
						} else {
							vue.doEditPrice(value);
						}
					}
					return false;
				},'div');
			},
			
			/*师傅答应以某某价格收购,状态2->2*/
			"doEditPrice":function(price){
				var index = layer.open({type: 2,shadeClose:false});
				$.post(apiRecycle+"index.php/Home/Master/edit_price", {
					rid:rid,
					price:price
				}, function(res){
					if(res.code==200){
						vue.order.price = price;
						vue.order.status = 3;
					} else {
						mui.toast(res.message,{ duration:'long', type:'div'});
					}
					layer.close(index);
				}, "json");
			},
			
			/*师傅确认回收,状态2->3*/
			"comfirmRecycle":function(){
				mui.confirm( "确认回收", "", ["取消", "确认"], function(val){
					if(val.index==1){
						var index = layer.open({type: 2,shadeClose:false});
						$.post(apiRecycle+"index.php/Home/Master/comfirm_recycle", {
							rid:rid
						}, function(res){
							if(res.code==200){
								vue.order.status = 3;
							} else {
								mui.toast(res.message,{ duration:'long', type:'div'});
							}
							layer.close(index);
						}, "json");
					}
				});
			}
		},
		ready:function(){
			var index = layer.open({type: 2,shadeClose:false});
			$.post(apiRecycle+"index.php/Home/Master/get_order", {rid:rid}, function(res){
				vue.order = res.data;
				vue.order.price = parseInt(vue.order.price);
				layer.close(index);
			}, "json");
		}
	});
</script>
</html>